<template>
  <div class="p-4">
    <GrowCard :loading="loading" :growCardList="growCardList" :dataMonth="dataMonth" class="enter-y" />
    <WaterSiteAnalysis class="!my-4 enter-y" :loading="loading" />
    <DormSiteAnalysis class="!my-4 enter-y" :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import GrowCard from '../components/GrowCard.vue';
  import WaterSiteAnalysis from '/@/views/dashboard/hotWaterStatistic/components/SiteAnalysis.vue';
  import DormSiteAnalysis from '/@/views/dashboard/dormStatistic/components/SiteAnalysis.vue';
  import { getIndexStatistic, getCurrentMonthStatistic } from '../api';
  import { Month, Item } from '../data';

  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 500);

  const growCardList = ref<any[]>([]);
  const dataMonth = reactive<Month>({
    Water_weight_everymonth: 0,
    Water_amount_everymonth: 0,
    Water_times_everymonth: 0,
    Electric_EveryMonth_times: 0,
    Electric_EveryMonth_AllMoney: 0,
    Electric_EveryMonth_ALLQuantity: 0,
  });

  const getIndexStatisticFun = async () => {
    const res = await getIndexStatistic({});
    growCardList.value = res;
  };

  const getCurrentMonthStatisticFun = async () => {
    const res = await getCurrentMonthStatistic({});
    res.forEach((element: Item) => {
      if (element.dataCallStoredProcedure !== 'Electric_EveryMonth') {
        dataMonth[element.dataCallStoredProcedure] = Number(element.dataValue);
      } else {
        const dataValue = JSON.parse(element.dataValue);
        for (const key in dataValue) {
          if (dataValue.hasOwnProperty(key)) {
            dataMonth[`Electric_EveryMonth_${key}`] = Number(dataValue[key]);
          }
        }
      }
    });
    console.log(dataMonth);
  };

  getIndexStatisticFun();
  getCurrentMonthStatisticFun();
</script>
